<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1000px;
            height: 750px;
            background-color: black;
        }
        .add {
            display: flex;
        }

        .add1 {
            margin: 5px 10px 18px 16px;
            font-size: 20px;
            color: aliceblue;
        }

        .add2 {
            margin: 8px 10px 18px 20px;
            font-size: 14px;
            border-right: 2px solid rgb(124, 123, 123);
            padding-right: 20px;
            color: rgb(201, 204, 207);

        }

        .add3 {
            margin: 8px 10px 18px 5px;
            font-size: 14px;
            color: rgb(201, 204, 207);

        }

        .teleplay1 {
            display: flex;
            margin: 5px 32px 20px 16px;
        }

        .teleplay {
            margin: 5px 32px 20px 5px;
        }
        .name{
            font-size: 16px;
            color: aliceblue;
            margin: 3px 3px 3px 3px;
        }
        .name1{
            font-size: 12px;
            color: rgb(156, 159, 161);
            margin: 3px 3px 3px 3px;
        }
    </style>
</head>


<body>
    <div class="box">
        <div class="add">
            <div class="add1">电视剧</div>
            <div class="add2">节目单</div>
            <div class="add3">更多></div>
        </div>
        <div class="teleplay1">
            <div class="teleplay">
                <div class="particulars">
                    <div class="index">
                        <img src="图片/1.png">
                    </div>
                    <div class="name">人世间</div>
                    <div class="name1">三世同堂谱写人间</div>
                </div>
            </div>
            <div class="teleplay">
                <div class="particulars">
                    <div class="index">
                        <img src="图片/1.png">
                    </div>
                    <div class="name">人世间</div>
                    <div class="name1">三世同人间烟火</div>
                </div>
            </div>
            <div class="teleplay">
                <div class="particulars">
                    <div class="index">
                        <img src="图片/1.png">
                    </div>
                    <div class="name">人世间</div>
                    <div class="name1">街上顶多几点</div>
                </div>
            </div>
            <div class="teleplay">
                <div class="particulars">
                    <div class="index">
                        <img src="图片/1.png">
                    </div>
                    <div class="name">人世间</div>
                    <div class="name1">是德国与</div>
                </div>
            </div>
            <div class="teleplay">
                <div class="particulars">
                    <div class="index">
                        <img src="图片/1.png">
                    </div>
                    <div class="name">人世间</div>
                    <div class="name1">时代峰峻客气</div>
                </div>
            </div>
            <div class="teleplay">
                <div class="particulars">
                    <div class="index">
                        <img src="图片/1.png">
                    </div>
                    <div class="name">人世间</div>
                    <div class="name1">三世同堂谱间烟火</div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>